<template>
  <div class="hello">
    <nav>
        <a class="nav-zuo" href="#/shoping">
            <i  @click="fanhui" class="fa fa-angle-left"></i>
        </a>
        提交订单
    </nav>
    <div class="dizhi">
        <a href="#/address" class="a">
            <span><i class="fa fa-map-marker"></i></span>
            <div class="di">
                <h3>收货人: {{shops.username}}</h3><span class="pori">{{shops.shouji}}</span>
                <p>收货地址: {{shops.sheng}}{{shops.dizhi}}</p>
                <span class="mian">(收获不便时,可选择免费代收货服务)</span>
            </div>
            <i class="fa fa-angle-right"></i>
        </a>
        <img src="../assets/6.jpg" alt="">
    </div>
     <!--{{shops}}-->
    <section>
        <ul  v-for="data in datas">
            <li class="li"  v-for="item in data">
                <!--{{item}}-->
                <img :src="`http://localhost:2222/images/photos/${item.productImage}`" alt="">
                <div>
                    <p class="ming">{{item.describe}}</p>
                    <p class="fah">发货时间: 卖家承诺10天</p>
                    <p class="jisuan">¥{{item.yuanPrice }}<span>x{{item.productNum}}</span></p>
                </div>
            </li>
        </ul>
    </section>
    <div class="xiang">
        <div>配送方式 <span class="hehe">快递 免运<i class="fa fa-angle-right"></i></span></div>
        <div>运费险 <span><i class="fa fa-angle-right"></i></span></div>
    </div>
    
    <footer>
        合计: <span> ¥{{ total }} </span><a @click.prevent="isShow = !isShow">提交订单( {{nums}} )</a>
    </footer>
    <transition name="slide">
    <div class="zhifu"  v-if="isShow">
        <div class="zhi-top">
            <span @click="isShow = !isShow">X</span>
            确认付款
        </div>
        <h3>¥ {{total}}</h3>
        <p>支付宝号 <span>156******73</span></p>
        <p>付款方式 <span> 建设银行信用卡(6353) <i class="fa fa-angle-right"></i></span></p>
        <button @click.prevent = "goumai">立即付款</button>
    </div>
    </transition>
  </div>
</template>
<script>
    import axios from 'axios'
  // import { XInput, Group, XButton, Cell } from 'vux'
  import { Group, CellBox, Checklist, Cell, Divider } from 'vux'
  
  export default{
    components: {
    Group,
    Checklist,
    Cell,
    Divider,
    CellBox
  },
    data:function(){
      return {
          datas:'',
          user:'',
          addresses:'',
          data:'',
          isShow:false,
          shops:'',
      }
    },
    mounted:function(){
        var that = this;
        axios.get('los/huo').then((data) =>{
        //   console.log(data.data.message)
            that.datas = data.data.message;
            let nums = 0;
            that.user = data.data.user;
        });
        axios.get('los/huodzhi').then((data) =>{
        //   console.log('-----------------------')
        //   console.log(data.data.message)
            that.shops = data.data.message;
        })
    },
    computed:{
        nums :function(){
            let nums= 0;
            this.datas.forEach(function(data) {
                for(var i = 0;i < data.length ;i++){
                    nums += data[i].productNum * 1
                }
                return nums
            });
            return nums
           
        },
      total :function(){
        let total= 0;
        this.datas.forEach(function(data) {
            for(var i = 0;i <data.length ;i++){
                    total += data[i].productNum * data[i].yuanPrice;
            }
            return total;
        });
        return total;
      }
    },
    methods:{
      goumai:function(){
          axios.post('los/goumai').then(function(data){

              alert('购买成功');
              location.href = '/#/shoping'
          }).catch(function(err){
              console.log('购买失败')
          })
      },
      fanhui:function(){
        let arr = [];
          this.datas.forEach((data) =>{
              for(var i = 0;i < data.length ;i++){
                    arr.push(data[i].productId)
                }
          });
          console.log(arr);
         axios.post('los/fanhui',{'arr':arr}).then(function(data){
             console.log('删除成功')
          }).catch(function(err){
              console.log('删除失败')
          })
      }
    }
  }
</script>
<style scoped>
     .slide-enter{
			height: 0 !important;
        }
        .slide-enter-active {
            transition: all 0.7s;
        }
        .slide-leave-active{ 
            transition: all 0.7s;
        }
        .slide-leave-to{
			height: 0px !important;
        }
    .hehe{
        position: absolute;
        right: 10px;
    }
    footer > span{
        color: #FF8C00;
    }
    footer{
        line-height: 45px;
        border-top: 1px solid #ccc;
        position: fixed;
        left: 0;
        bottom: 0;
        right: 0;
        text-align: right;
        background: #fff;
    }
    footer > a{
        display: inline-block;
        background: #cc0000;
        color: #fff;
        height: 100%;
        padding: 0 15px;
        margin-left: 10px;
    }
    .xiang{
        padding-left: 10px;
        margin-bottom: 60px;
    }
    .xiang > div{
        line-height: 50px;
        border-bottom: 1px #ddd solid;
        padding-right: 10px;
    }
    .xiang > div > span{
        float: right;
        font-size: 14px
    }
    .xiang > div > span strong{
        display: inline-block;
        width: 30px;
        background: #ddd;
        height: 25px;
        text-align: center;
        line-height: 25px;
        margin: 0 5px;
    }
     .xiang > div > span  i{
         font-style: normal;
         font-size: 26px;
         margin-left: 10px;
         position: relative;
         top: 3px;
     }
    .jisuan{
        color: #cc0000;
        margin-top: 10px;
    }
    .jisuan > span{
        float: right;
        margin-right: 10px;
    }
    .ming{
        font-size: 14px;
        margin: 10px 0;
    }
    .fah{
        color: #FF8C00;
    }
    .li{
        height: 120px;
        border: 1px solid #eee;
        margin-top: 10px;
        background: #efefef;
        list-style: none;
        font-size: 14px;
    }
    .li > img{
        display: block;
        float: left;
        width: 25%;
        margin: 10px;
    }
    .a > i{
        position: absolute;
        top:45px;
        right: 10px;
        font-size: 28px;
    }
    .mian{
        color: #FF8C00;
        font-size: 12px;
        margin-left: 10px;
    }
    .di h3{
        margin: 10px 0;
        font-size: 16px;
    }
    .di p{
        font-size: 14px;
        width: 310px;
        word-wrap:break-word ;
        line-height: 25px;
    }
    .pori{
        position: absolute;
        top: 10px;
        right: 35px;
    }
  .dizhi{
      background: #eee;
      margin-top: 45px;
  }
  .dizhi > img{
      width: 100%;
  }
  .a {
      border: 1px solid #eee;
      display: block;
      height: 130px;
      color: #333;
      position: relative;
  }
  .a > span{
    float: left;
    width: 15px;
    height: 100%;
    font-size: 26px;
    margin: 0 10px;
    position: relative;
    top: 40px;
  }
  nav{
    background: #EE6363;
    text-align: center;
    color: #fff;
    line-height: 45px;
    position: fixed;
    z-index: 666;
    top: 0;
    left: 0;
    right: 0;
  }
  nav a{
    position: absolute;
    left: 20px;
    font-size: 28px;
    color: #fff;
    top: -3px;;
  }

  .zhifu{
        background: #fff;
        position: absolute;
        bottom: -12px;
        left: 0;
        right: 0;
        border-top: 1px solid #ccc;
        z-index: 666;
        height: 350px;
  }
  .zhi-top{
    line-height: 45px;
    border-bottom: 1px solid #ccc;
    text-align: center;
    position: relative;
  }
  .zhi-top span{
    position: absolute;
    left: 10px;
  }
  .zhifu h3{
    text-align: center;
    font-size: 26px;
    margin: 10px;
  }
  .zhifu p{
    line-height: 45px;
    padding-left: 10px;
    border-bottom: 1px solid #ccc;
    position: relative;
    color: #666;
  }
  .zhifu p span{
    position: absolute;
    right: 10px;
    color: #333;
  }
  .zhifu p span i{
    font-size: 24px;
    position: relative;
    top: 2px;
    margin-left: 5px;
  }
  .zhifu button{
    width: 70%;
    margin: 100px 15% 20px;
    border: 1px solid #EE6363;
    background: #EE6363;
    color: #fff;
    padding: 5px;
    border-radius: 5px;
  }

  /*.span2 > i{
    font-style: normal;
    display: inline-block;
    background: #ccc;
    width: 25px;
    height: 25px;
    text-align: center;
    position: relative;
    top:18px;
    font-size: 26px;
  }*/
</style>